<template>
    <div class="main-background flex-row">
        <div class="flex-body">
            <div class="main-container sea-transition" :class="expand === true? '': 'width-80'">
                <div class="main-header sea-transition" :class="displayHeader === true? '': 'main-header-hidden'">
                    <div style="margin: 0 10px;"></div>

                    <div class="main-header-btn bg-green">
                        标题1<i class="fa fa-home"></i>
                    </div>
                    <div class="main-header-btn bg-green">
                        标题1<i class="fa fa-home"></i>
                    </div>

                </div>

                <div class="flex-row main-body">
                    <div class="flex-left flex-column box" style="min-width: 320px;">
                        <div class="flex-header input-group with-icon">
                            <el-input type="text" class="input" placeholder="请输入……">
                                <template #suffix><i class="fa fa-fw fa-search"></i></template>
                            </el-input>
                        </div>

                        <div class="flex-body scroll-mini" style="margin-top: 10px;padding-right: 10px;">
                            <div v-for="(item, idx) in menus" :key="idx">
                                <h5><i :class="item.icon"></i>{{ item.title }}</h5>
                                <ul class="disabled-list-style" style="margin-left: 32px;">
                                    <li v-for="(sub, index) in item.children" :key="index" class="text-block"
                                        @click="openPage(sub)">
                                        {{ sub.title }}<i :class="sub.icon"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="flex-body flex-column">
                        <div class="flex-header fill-default " style="border-bottom: 2px solid #535353;">
                            <div class="sea-tabs flex-row">
                                <div class="sea-tab-item">
                                    <span>12313</span>
                                    <icon-close class="sea-tab-item-remove"></icon-close>
                                </div>
                                <div class="sea-tab-item">
                                    <span>12313</span>
                                    <icon-close class="sea-tab-item-remove"></icon-close>
                                </div>
                                <div class="sea-tab-item">
                                    <span>12313</span>
                                    <icon-close class="sea-tab-item-remove"></icon-close>
                                </div>
                                <div class="align-right sea-tab-item" @click="scrollTop">返回顶部</div>
                            </div>
                        </div>
                        <div ref="bodyRef" class="flex-body hidden-scroll" style="scroll-behavior: smooth;">
                            <router-view v-slot="{ Component }">
                                <transition>
                                    <keep-alive>
                                        <component :is="Component">13123</component>
                                    </keep-alive>
                                </transition>
                            </router-view>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex-left main-right">
            <div class="main-header-item bg-primary"
                 @click="()=>{expand = !expand}" title="半屏展示">
                <i :class="expand?'fa fa-fw fa-compress':'fa fa-fw fa-expand'"></i>
            </div>

            <div class="main-header-item bg-primary"
                 @click="()=>{displayHeader = !displayHeader}" title="隐藏标题栏">
                <i :class="displayHeader?'fa fa-fw fa-chevron-up':'fa fa-fw fa-chevron-down'"></i>
            </div>

            <div style=""></div>

            <div class="main-header-item bg-success" @click="homePage" title="返回主页">
                <i class="fa fa-home"></i>
            </div>
            <div class="main-header-item bg-success">
                <i class="fa fa-user"></i>
            </div>
            <div class="main-header-item bg-success">
                <i class="fa fa-book"></i>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import router from "@/router/index";
import MenuManager from "@/starter/menu-manager.js";
import ImageIcon from "@/widget/image/image-icon.vue";

const popper_options = ref({
    modifiers: [
        {
            name: 'computeStyles',
            options: {gpuAcceleration: false, adaptive: false}
        }
    ]
});

// 半屏展示
const expand = ref(true);

// 展示标题栏
const displayHeader = ref(true);

// 是否展开侧滑导航
const expendNavigation = ref(true);


// 是否展开搜索栏
const expendSearchbar = ref(true);

// 菜单栏列表
const menus = ref([]);

MenuManager.getExamples().then(list => {
    menus.value = list;
    console.log(menus.value);
})

/**
 * 菜单路由前缀
 *
 * @type {string}
 */
const suffix = '/sample/';

/**
 * 点击菜单
 *
 */
const openPage = (item) => {
    router.push({path: item.path});
}

/**
 * 点击菜单
 *
 * @param {string} key
 * @param {Array<string>} raw
 */
const handleOpen = (key, raw) => {
    console.log(raw);
    if (!key.startsWith('ignore')) {
        const target = suffix + raw.join('/');
        router.push({path: target});
    }
    return true;
}

/**
 * 打开主页
 */
const homePage = () => {
    router.push({path: "/"});
}

const bodyRef = ref<HTMLElement>();

const scrollTop = ()=>{
    bodyRef.value.scrollTop = 0;
}

// album start -------------------------------------------------------------------------------

</script>

<style scoped>

.sea-tabs {
    .sea-tab-item {
        cursor: pointer;
        padding: 4px 10px;
        border-right: 1px solid lightgray;
        border-bottom: 2px solid deepskyblue;

        >.sea-tab-item-remove{

            &:hover{
                background-color: lightgray;
            }
        }
    }
}

.main-background {
    background-color: #6e6d6d;
}

.main-background {
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08);
}

.main-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08)
}

.main-header {
    opacity: 1;
    flex-shrink: 0;
    height: 64px;
    background-color: #757474;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    gap: 10px;
}

.main-header-hidden {
    height: 0;
    opacity: 0;
}

.main-body {
    flex: 1;
    gap: 2px;
    box-sizing: border-box;
    overflow-y: auto;
}

.main-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    align-items: center;
    justify-items: center;
    width: 64px;
}


.main-header-item {
    width: 36px;
    height: 36px;
    border: 2px solid #e4dfcc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        box-shadow: 0 0 8px 8px rgba(30, 229, 206, 0.2);
    }
}

.main-header-btn {
    height: 32px;
    border: 2px solid #e4dfcc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        box-shadow: 0 0 8px 8px rgba(30, 229, 206, 0.2);
    }
}

</style>
